<template>
    <div>
        <a-modal
        title="选择申请依据"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        width="70%"
        wrapClassName=""
        :dialog-style="{ top: '20px'}"
        >
            <div v-if="visible" class="selectSqyjTable-tabs-card-box">
                <a-tabs type="card" v-model:activeKey="tabPaneActiveKey" @change="tabPaneChange">
                    <a-tab-pane key="NK_CCSP" tab="出差申请" v-if="tableType == '差旅报销'"></a-tab-pane>
                    <a-tab-pane key="OA_XZSWSP" tab="事项申请" v-if="tableType == '一般报销'"></a-tab-pane>
                    <a-tab-pane key="NK_HTSPLC" tab="合同审批单" v-if="tableType == '一般报销'"></a-tab-pane>
                    <a-tab-pane key="NK_JCXSWSQ" tab="经常性事务申请" v-if="tableType == '一般报销'"></a-tab-pane>
                </a-tabs>
                <div v-if="tabPaneActiveKey == 'NK_JCXSWSQ'" style="border: 1px solid #38f;border-top: 0;">
                    <usualnessApplyFor ref="usualnessApplyForRef" :getHeight="tableHeight" @usualnessApplyForKeysChange="usualnessApplyForKeysChange"/>
                </div>
                <div v-else style="border: 1px solid #38f;border-top: 0;">
                    <commpVxeTable
                    :key="dataTableKey"
                    :config="dataTableConfig"
                    :columns="columnsVxe"
                    :formItem="formItem"
                    :conditionBtnRow="true"
                    ref="acceptanceRegistrationRef"
                    @radioChange="selectedRowKeysChange"
                    @searchEvent="searchEvent"
                    @resetEvent="resetEvent"
                    :isCanWrap="true"
                    >
                        <template v-slot:fxm_name="{row}">
                            <span style="padding-right: 21;" v-if="row.fxm && row.fxm.length == 2">
                                <span v-for="(trem,tI) in row.fxm.split('')" :key="tI" >
                                {{trem}}
                                <span v-if="tI+1 !== row.fxm.split('').length">&nbsp;&nbsp;</span>
                                </span>
                            </span>
                            <span style="padding-right: 21;" v-else>{{ row.fxm }}</span>
                        </template>
                        <template v-slot:fnbr_name="{row}">
                            <span style="padding-right: 21;" v-if="row.fnbr && row.fnbr.length == 2">
                                <span v-for="(trem,tI) in row.fnbr.split('')" :key="tI" >
                                {{trem}}
                                <span v-if="tI+1 !== row.fnbr.split('').length">&nbsp;&nbsp;</span>
                                </span>
                            </span>
                            <span style="padding-right: 21;" v-else>{{ row.fnbr }}</span>
                        </template>
                        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item>
                                    <a-button class="blue-btn" type="primary" @click="viewHandele(row)" icon="eye">预览</a-button>
                                </a-form-item>
                            </a-form>
                        </template>
                    </commpVxeTable>
                </div>
            </div>
        </a-modal>
        <oaModal v-show="false" ref="oaModalRef" ></oaModal>
        <nkModal v-show="false" ref="nkModalRef" ></nkModal>
    </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import usualnessApplyFor from './usualnessApplyFor'
import {zzrybxdupdateJcyFybxdGrjl} from './service/index'
import assessCheckApi from './service/api'
export default {
    components:{
        commpVxeTable,
        usualnessApplyFor,
        oaModal: () => import('@/views/administrativeOffice-new/yiBan/index'),
        nkModal: () => import('@/views/internalControl/yiBan/index')
    },
    props:{

    },
    data(){
        return{
            visible:false,
            category:[],
            dataTableKey:null,
            formItem:[],//
            formItemA:[ {
                label: '姓名',
                model: 'fxm',
            },],//
            formItemHt:[ {
                label: '合同名称',
                model: 'fhtmc',
            },],//
            columnsVxe: [],
            columnsVxeCC:[
                {
                    type: 'radio',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '姓名', //列头显示文字
                    field: 'fxm',
                    slots: {
                        header:'fxm_header',
                        default: 'fxm_name'
                    },
                    titleInterval:true,
                    width:90,
                },{
                    title: '填报部门',
                    field: 'ftbdw',
                },{
                    title: '填报时间', //列头显示文字
                    field: 'ftbsj',
                    width: 200,
                },{
                    title: '出差地点', //列头显示文字
                    field: 'fccdd',
                },{
                    title: '出差事由', //列头显示文字
                    field: 'fccsy',
                },{
                    title: '操作',
                    field: 'jobid',
                    width: 100,
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                }
            ],
            columnsVxeXZ:[
                {
                    type: 'radio',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '事顶', //列头显示文字
                    field: 'fsx',
                },{
                    title: '拟办人', //列头显示文字
                    field: 'fnbr',
                    slots: {
                        default: 'fnbr_name'
                    },
                    width: 100,
                },{
                    title: '拟办时间', //列头显示文字
                    field: 'fnbsj',
                    width: 200,
                },{
                    title: '拟办意见', //列头显示文字
                    field: 'fnbyj',
                },{
                    title: '日期', //列头显示文字
                    field: 'frq',
                },{
                    title: '操作',
                    field: 'jobid',
                    width: 100,
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                }
            ],
            columnsVxeHt:[{
                type: 'radio',
                width: 60 ,
                fixed: 'left'
            },{
                title: '合同名称', //列头显示文字
                field: 'fhtmc',
            },{
                title: '中标供应商名称', //列头显示文字
                field: 'fzbgysmc',
            },{
                title: '合同金额',
                field: 'fhtje',

            },{
                title: '采购方式', //列头显示文字
                field: 'fcgfs',
            },{
                title: '操作',
                field: 'jobid',
                width: 100,
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
            }],
            dataTableConfig:{
                api: assessCheckApi.zzrybxdsqLitsSelect,
                rowId: 'id',
                urlType: true,
                paramet:{
                    flcbm: ''
                },
                height:window.innerHeight - 380,
            },
            tableHeight: window.innerHeight - 380 - 36,
            selectedRowKeysArr:[],
            bxdId: '',
            tabPaneActiveKey:'NK_CCSP',
            tableType: '',
        }
    },
    watch:{},
    mounted(){},
    methods:{
        getData(val,type){
            this.tableType = type
            if(this.tableType == '差旅报销'){
                this.tabPaneActiveKey = 'NK_CCSP'
            } else if(this.tableType == '一般报销'){
                this.tabPaneActiveKey = 'OA_XZSWSP'
            }
            //console.log('？？？',val,val.bxdid)
            this.bxdId = val.bxdid
            this.tabPaneChange(this.tabPaneActiveKey)
        },
        tabPaneChange(val){
            this.tabPaneActiveKey = val
            this.dataTableConfig.paramet = {
                flcbm: val
            }
            this.selectedRowKeysArr = []
            if(val == 'NK_CCSP'){
                this.columnsVxe = [...this.columnsVxeCC]
                this.formItem = []
                this.formItem = [...this.formItemA]
            } else if (val == 'OA_XZSWSP'){
                this.columnsVxe = [...this.columnsVxeXZ]
                this.formItem = []
                this.formItem = [...this.formItemA]
            } else if (val == 'NK_HTSPLC'){
                this.columnsVxe = [...this.columnsVxeHt]
                this.formItem = []
                this.formItem = [...this.formItemHt]
            } else if( val == 'NK_JCXSWSQ'){
                // this.timeout = setTimeout(() => {
                    // this.$refs.usualnessApplyForRef.getData('1')
                // }, 500);
            }
            this.dataTableKey = Date.now()
        },
        selectedRowKeysChange(val){
            this.selectedRowKeysArr = []
            // if(val.length){
            //     val.forEach(item => {
            //         this.selectedRowKeysArr.push(item.id)
            //     });
            // }
            this.selectedRowKeysArr.push(val.newValue.id)
        },
        usualnessApplyForKeysChange(item){
            //console.log('选中了',item)
            this.selectedRowKeysArr = []
            this.selectedRowKeysArr = item
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        viewHandele(row){
            //console.log(row)
            let data = {
                jobid: '',
                flcmb: this.tabPaneActiveKey,
                fpid: row.id
            }
            if(this.tabPaneActiveKey == 'NK_HTSPLC'){
                this.$refs.nkModalRef.reviseClick(data)
                return
            }
            this.$refs.oaModalRef.reviseClick(data)
        },
        handleOk(){
            // let lcmb = this.tabPaneActiveKey == 'NK_JCXSWSQ'?'':this.tabPaneActiveKey
            // //console.log('？？？',lcmb)
            // return
            if(this.selectedRowKeysArr.length){
                //console.log('没得到id???',this.bxdId)
                // let lcmb = (this.tabPaneActiveKey == 'NK_JCXSWSQ')?'':this.tabPaneActiveKey
                // //console.log('？？？',lcmb)
                let data = {
                    bxdid: this.bxdId,
                    sqsxid: this.selectedRowKeysArr.join(','),
                    flcbm: this.tabPaneActiveKey,
                }
                zzrybxdupdateJcyFybxdGrjl(data).then(res => {
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('getData',{fpid:res.result.records,isChange: false,flcmb: this.tabPaneActiveKey,view: false,heightType:'model'})
                        this.visible = false
                    } else {
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.$message.warning('请先选择申请依据')
            }
        },
        handleCancel(){
            this.visible = false
        }
    }
}
</script>
<style lang="less">
.selectSqyjTable-tabs-card-box{
    margin: 5px 15px 0 15px;
    .ant-tabs-bar{
        // border: 0 !important;
        border-color: #38f !important;
        margin: 0 !important;
    }
    .ant-tabs-tab{
        background: #edeff3 !important;
        font-size: 14px !important;
        margin-left: 1px !important;
        height: 30px !important;
        line-height: 30px !important;

    }
    .ant-tabs-tab-active{
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 1px !important;
        background-color: #38f !important;
        color: #fff !important;
        height: 32px !important;
        border: 1px solid #38f !important;
        border-bottom: 0 !important;
        padding:0 15px !important;

    }
    .ant-tabs-nav-container{
        height: 32px !important;
    }
}
</style>
